<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title th:text="${#session.getAttribute('title')}">Title</title>
    <!-- 引入ECharts -->
    <script th:src="@{/webjs/echarts.min.js}"></script>
    <script th:src="@{/webjs/jquery-1.10.1.min.js}"></script>
    <link th:href="@{/css/footer.css}" rel="stylesheet" type="text/css" media="screen,print"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-..." crossorigin="anonymous">
</head>
<body>
<div id="myPieChart" style="width: 100%; height: 400px;"></div>

<footer class="footer fixed-bottom">
    <div class="footer-links d-flex justify-content-center">
        <a href="toAdminIndex" class="footer-link"><i class="fas fa-chart-line"></i> 排行榜</a>
        <a href="toBar" class="footer-link active"><i class="fas fa-chart-bar"></i> 分析情况</a>
        <a href="toSetting" class="footer-link"><i class="fas fa-cog"></i> 设置</a>
    </div>
</footer>
<script>
    $(document).ready(function () {
        getBar();
    });

    function getBar() {
        let retData = [];
        $.ajax({
            url: "/getBarData",
            type: 'post',
            async: false,
            success: function (res) {
                retData = res; // 直接将响应数据赋值给retData
                drawPieChart(retData); // 调用绘图函数
            },
            error: function (error) {
                console.log(error);
            }
        });
        return retData;
    }

    function drawPieChart(data) {
        var chartDom = document.getElementById('myPieChart');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: Object.keys(data)
            },
            series: [
                {
                    name: '积分情况',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '60%'],
                    data: Object.entries(data).map(([name, value]) => ({name, value})),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    }
</script>
</body>
</html>